<template>
  <div class="file-upload">
    <el-upload
        v-bind="$attrs"
        :action="action"
        list-type="picture-card"
        :before-upload="handleBeforeUpload"
        :on-success="handleSuccess"
        name="file"
        :on-error="handleError"
        :limit="10"
        :data="data"
        :headers="header"
        :on-preview="handlePictureCardPreview"
        >
      <i class="el-icon-plus"></i>
    </el-upload>
  </div>
</template>

<script>
import {TokenUtil} from "@/util/TokenUtil";

export default {
  name: "FileUpload",

  data() {
    return {
      action:"/api/file/file/upload",
      data:{

      },
      header:{
        token:TokenUtil.getToken()
      },
      dialogImageUrl: '',
      dialogVisible: false,
      disabled: false,
      acceptFileList:[]
    }
  },
  methods: {

    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。
    handleBeforeUpload(file){

    },
    handleSuccess(response, file, fileList){
      console.log('上传成功')
      console.log("file resp",response)
      this.$emit("success",{
        response,
        file,
        fileList
      })
    },
    handleError(response, file, fileList){

    }
  }
}
</script>

<style scoped lang="less">
  .file-upload{

  }
</style>